<template>
  <auth-page>
    <view class="nav-bar">
      <u-navbar
        :safeAreaInsetTop="true"
        :bgColor="themeColor || '#ffffff'"
        :fixed="false"
        :height="navBarHeight + 'rpx'"
      >
        <view class="u-nav-slot" slot="left">
          <view
            v-if="currentLocation.latitude > 0"
            class="address"
            @click="handleMixinAuth(handleToChooseAddress)"
          >
            <u-icon name="map" color="#ffffff" size="32rpx" />
            <text class="address-success" v-if="currentLocation.title">{{
              currentLocation.title
            }}</text>
          </view>
          <view
            v-else
            class="address"
            @click="handleMixinAuth(handleToChooseAddress)"
          >
            <text class="address-fail">获取定位失败，手动选择定位</text>
            <u-icon name="arrow-right" color="#ffffff" size="32rpx" />
          </view>
        </view>
      </u-navbar>
      <view
        :style="{ backgroundColor: themeColor }"
        class="search-bar"
        @click="
          $Router.push({
            name: 'shopSearch',
          })
        "
      >
        <div class="overlay"></div>
        <u-input
          v-model="searchVal"
          placeholder="请输入内容"
          border="surround"
          shape="circle"
          prefixIcon="search"
          :customStyle="searchCustomStyle"
          :disabled="true"
          disabledColor="#ffffff"
        >
          <template slot="suffix">
            <view class="search-text" :style="{ color: themeColor }">搜索</view>
          </template>
        </u-input>
      </view>
    </view>
    <view
      class="address-box"
      :style="{ height: height + 'rpx', backgroundColor: themeColor }"
    ></view>
  </auth-page>
</template>

<script>
import { mapState } from "vuex";
import { mixinAuth } from "@/mixin/sp-common/mixin-auth";

export default {
  name: "index",
  mixins: [mixinAuth],
  computed: {
    ...mapState("sp-address/location", ["currentLocation"]),
    ...mapState("sp-common/base", ["themeColor"]),
  },
  data() {
    return {
      navBarHeight: 88,
      searchHeight: 80, //单位rpx，搜索高度
      searchBarHeight: 80 + 30, //单位rpx，搜索高度加下边距
      height: 88,
      statusBarHeight: 88,
      searchCustomStyle: {
        backgroundColor: "#fff",
      },
      // themeColor: this.$theme.themeColor.primary,
      searchVal: "",
    };
  },
  created() {
    this.initNav();
  },
  methods: {
    initNav() {
      const systemInfo = uni.getSystemInfoSync();
      let navBarHeight = 0;
      if (/ios/i.test(systemInfo.platform)) {
        navBarHeight = 88;
      } else if (systemInfo.platform === "devtools") {
        navBarHeight = 88;
      } else {
        navBarHeight = 96;
      }
      this.statusBarHeight = systemInfo.statusBarHeight * 2;
      this.navBarHeight = navBarHeight;
      this.height =
        navBarHeight + this.searchBarHeight + systemInfo.statusBarHeight * 2;
    },
    handleGetAddressBarHeight() {
      return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(".address-box")
          .boundingClientRect((data) => {
            resolve(data.height);
          })
          .exec();
      });
    },
    handleToChooseAddress() {
      this.$Router.push({
        name: "chooseAddress",
      });
    },
    handleSearch() {
      this.$emit("handleSearch", this.searchVal);
    },
  },
};
</script>

<style scoped lang="scss">
.address {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 32rpx;
  &-success {
    font-size: 30rpx;
    margin-left: 10rpx;
  }
  &-fail {
    font-size: 30rpx;
    margin-right: 10rpx;
  }
}
.nav-bar {
  position: fixed;
  width: 100vw;
  z-index: 999;
}
.search-bar {
  padding: 0 24rpx 30rpx 24rpx;
  z-index: 1;
  position: relative;
  .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    //right: 0;
    top: 0;
    //bottom: 0;
    z-index: 2;
  }
  .search-text {
    padding-right: 10rpx;
    padding-left: 24rpx;
    border-left: 1rpx solid #dddddd;
  }
}
</style>
